<template>
    <div class="login">
        <div class="login_box pos_center">
            <div class="box_left">
                <img src="../../../static/common/img/login-log.jpg" alt="">
            </div>
            <div class="box_right">
                <div style="padding:20px;">
                    <div class="bold font_24">登录</div>
                    <div class="font_14 col_666">请填写账号信息</div>
                </div>
                <div class="login_form cursor">
                    <div class="form_left">
                        <a-form
                                :form="form"
                                @submit="handleSubmit"
                        >
                            <a-form-item
                                    label="账号"
                                    :label-col="{ span: 5 }"
                                    :wrapper-col="{ span: 12 }">
                                <a-input placeholder="请输入账号"
                                        v-decorator="[
          'userCode',
          {rules: [{ required: true, message: '账号不能为空' }]}
        ]"
                                />
                            </a-form-item>
                            <a-form-item
                                    label="密码"
                                    :label-col="{ span: 5 }"
                                    :wrapper-col="{ span: 12 }">
                                <a-input placeholder="请输入密码" type="password"
                                        v-decorator="[
          'password',
          {rules: [{ required: true, message: '密码不能为空' }]}
        ]"
                                />
                            </a-form-item>
                            <a-form-item
                                    label="验证码" :label-col="{ span: 5 }"
                                    :wrapper-col="{ span: 12 }"
                            >
                                <a-row :gutter="8">
                                    <a-col :span="12">
                                        <a-input placeholder="验证码"
                                                v-decorator="['kaptcha',
              {rules: [{ required: true, message: '验证码不能为空' }]}
            ]"
                                        />
                                    </a-col>
                                    <a-col :span="12" @click="getTempToken()">
                                        <img :src="$global.API+'captchaRest/getValidateImg?tempToken='+tempToken" alt="">
                                    </a-col>
                                </a-row>
                            </a-form-item>
                            <a-form-item
                                    :wrapper-col="{ span: 12, offset: 5 }"
                            >
                                <a-button
                                        type="primary"
                                        html-type="submit"
                                >
                                    登录
                                </a-button>
                            </a-form-item>
                        </a-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return{
        form: this.$form.createForm(this),
        tempToken:'',
      }
    },
    created() {
      this.getTempToken()
    },
    methods: {
      handleSubmit(e) {
        let self = this
        e.preventDefault();
        self.form.validateFields((err, values) => {
          if (values.userCode && values.password && values.kaptcha) {
            self.$axios.post('loginRest/login',{
              ...values,
              tempToken:self.tempToken
            }).then(res => {
              if(res.data.result) {
                let obj = res.data.obj
                sessionStorage.setItem('token', obj.token)
                sessionStorage.setItem('userName', obj.userName)
                sessionStorage.setItem('userCode', obj.userCode)
                sessionStorage.setItem('userType', obj.userType)
                sessionStorage.setItem('investorId', obj.investorId)
                sessionStorage.setItem('curMonth', obj.curMonth)
                sessionStorage.setItem('userId', obj.userId)
                self.$message.success('登录成功!');
                self.$router.push('/main')
              }else {
                self.$message.error(res.data.msg);
                self.getTempToken()
              }
            }).catch(function () {
              self.getTempToken()
              self.$message.error('用户名或者密码错误');
            })
          }
        });
      },
      // 获取验证码图片
      getTempToken() {
        let self = this
        self.$axios.post('captchaRest/getTempToken').then(res => {
          if (res.data.result) {
            self.tempToken = res.data.msg
          }
        })
      }
    },
  }
</script>

<style lang="scss">
    .login {
        background-color: #f4f4f4;
        width: 100%;
        height: 100vh;
        .login_box {
            width: 660px;
            height: 370px;
            .box_left {
                width: 260px;
                display: inline-block;
            }
            .box_right {
                background-color: #fff;
                width: 400px;
                height: 100%;
                display: inline-block;
                vertical-align: top;
                text-align: left;
                .login_form {
                    > div {
                        display: inline-block;
                    }
                    .form_left {
                        width:100%;
                    }
                    .form_right {
                        border-left: 1px solid #32ace0;
                    }
                }
            }
        }
    }
</style>